<template>
  <van-popup closeable round position="bottom" v-model:show="show">
    <div class="pop">
      <div class="content">
        <div :class="{'all': true, 'active': activeClass == 'all'}" @click="chooseType({id: 'all'})">全部类型</div>
        <div class="list">
          <div class="title">支出</div>
          <div class="exponse-wrap item" v-if="expense">
            <p :class="{'active': activeClass == item.id}" v-for="item in expense" :key="item.id" @click="chooseType(item)">{{ item.name }}</p>
          </div>
        </div>
        <div class="list">
          <div class="title">收入</div>
          <div class="income-wrap item" v-if="income">
            <p :class="{'active': activeClass == item.id}" v-for="item in income" :key="item.id" @click="chooseType(item)">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineExpose, onMounted } from 'vue';
import axios from '@/api/index.js';
const show = ref(false) // 用来判断弹出框是否弹出
const emit = defineEmits(['handleType'])// 切换父组件内容
const activeClass = ref('all')// 切换属性
const expense = ref([])
const income = ref([])


// 从后端获取所有类型
onMounted(async() => {
  // res 是从后端请求回来的数据
  const res = await axios.get('/api/type/list')
  // console.log(res);
  // 过滤type类型，1放到expense，2放到income中
  expense.value = res.data.list.filter(item => item.type === '1')
  income.value = res.data.list.filter(item => item.type === '2') 
  
})

// 切换账单类型
const chooseType = (item) => {
  console.log(item);
  // 点谁谁就要加 active 类名
  activeClass.value = item.id
  // 父组件要展示这个 item.name
  emit('handleType', item)
  // 关闭弹框
  show.value = false
}
defineExpose({
  show: show
})

</script>

<style lang="less" scoped>
.pop{
  max-height: 70vh;
  background-color: #f5f5f5;
  .content{
    padding: 20px;
    font-size: 16px;
    .all{
      display: inline-block;
      padding: 14px 20px;
      background-color: #fff;
      border-radius: 2px;
    }
    .list{
      margin-top: 10px;
      .title{
        font-size: 14px;
        color: rgb(107, 107, 107);
        margin: 10px 0;
      }
      .item{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        p{
          text-align: center;
          padding: 14px;
          background-color: #fff;
          border-radius: 2px;
        }
      }
    }
  }
}
.active{
  background-color: rgb(54, 169, 98) !important;
  color: #fff;
}
</style>